<template>
  <div class="searchWrap">
    <div class="search" @click="hide">
      <div class="fl">
        <span class="icon-text" @click.stop="add" v-if="showAdd"
          ><i class="el-icon-plus"></i>{{ $t('public.add') }}</span
        >
        <span class="icon-text" @click.stop="refresh"
          ><i class="iconfont icon-shuaxin"></i>{{ $t('public.refresh') }}</span
        >
        <span class="icon-text" v-if="showMode">
          <el-radio-group v-model="authMode" @change="ModeChange">
            <el-radio label="provider">新版接入</el-radio>
            <el-radio label="dev">旧版接入</el-radio>
          </el-radio-group>
        </span>
        <span
          class="icon-text"
          :class="disabledReload ? 'disabled-text' : ''"
          v-if="isReloadIvr"
          @click.stop="active"
          ><i
            class="icon iconfont icon-fasongchenggong"
            :class="disabledReload ? 'disabled-icon' : ''"
          ></i
          >{{ $t('channelsettings.serviceNumber12') }}</span
        >
        <span
          class="icon-text"
          v-if="isReloadWebchatProcess"
          @click="webchatProcessReload"
          ><i class="icon iconfont icon-fasongchenggong"></i
          >{{ $t('channelsettings.serviceNumber12') }}</span
        >
        <slot name='custom-oprate'></slot>
        <el-input
          :style="{ width: width }"
          v-show="isShowInput"
          :placeholder="inputTitle || $t('channelsettings.serviceNumber13')"
          size="mini"
          class="condition"
          v-model="searchContent"
          @change="inputChange"
          @keyup.enter.native="handleIconClick"
        >
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click="handleIconClick"
          >
          </i>
        </el-input>
        <slot></slot>
        <!--高级搜索 按钮-->
        <el-button
          v-if="showAdvSearch"
          type="text"
          size="small"
          @click.stop="toggle"
          >{{ $t('public.advSearch') }}</el-button
        >
      </div>
      <pagination
        class="page"
        :small="true"
        v-show="!hiddenPage"
        :currentPage.sync="current"
        :count="count || 0"
        :pageSize="pageSize"
        @turnPage="turnPage"
        :totalPage="totalPage"
      >
      </pagination>
    </div>
    <!--高级搜索  查询条件 展示-->
    <advSchBadge
      v-if="badges && forCall && !opened"
      :badge="badges"
      @removeBadge="removeBadge"
    >
    </advSchBadge>
    <!--高级搜索 start =======================================================-->
    <div ref="advSearch" v-show="opened" class="popover" v-if="forCall">
      <el-form :inline="true" label-position="top">
        <el-form-item :label="'PBX'" class="itemTitle">
          <el-select size="mini" v-model="PBX">
            <el-option :label="$t('public.all')" :value="''"> </el-option>
            <el-option
              v-for="(item, index) in pbxs"
              :label="item.NickName + ' (' + item.PBX + ')'"
              :value="item.PBX"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('channelsettings.serviceNumber5')"
          class="itemTitle"
        >
          <el-select size="mini" v-model="serviceType">
            <el-option :label="$t('public.all')" :value="''"> </el-option>
            <el-option
              v-for="(item, index) in serviceList"
              :label="item.label"
              :value="item.value"
              :key="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('channelsettings.ServiceNumber')"
          class="itemTitle"
        >
          <el-input
            v-model="serviceNo"
            :placeholder="$t('channelsettings.serviceNumber13')"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-for="(item, index) in advSearch.items"
          :label="item.title"
          class="itemTitle"
          :key="index"
        >
          <el-input
            v-if="item.type === 'input'"
            v-model="advSearch.form[item.valueName]"
            :placeholder="$t('channelsettings.serviceNumber13')"
          ></el-input>
          <el-select
            size="mini"
            v-if="item.type === 'select'"
            v-model="advSearch.form[item.valueName]"
          >
            <el-option
              v-for="(one, index) in item.data"
              :label="one.label"
              :value="one.value"
              :key="index"
            >
            </el-option>
          </el-select>
          <el-checkbox-group
            v-if="item.type === 'checkbox'"
            v-model="advSearch.form[item.valueName]"
          >
            <el-checkbox
              v-for="(one, index) in item.data"
              :label="one.label"
              :key="index"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div class="btnWrap">
        <el-button
          type="info"
          class="primary_btn report_excel_btn"
          @click="advResetBtn"
          >{{ $t('public.reset') }}</el-button
        >
        <el-button type="primary" class="primary_btn" @click="advSearchBtn">{{
          $t('public.search')
        }}</el-button>
      </div>
    </div>
    <!--高级搜索 end==================================================-->
    <el-dialog
      :close-on-click-modal="false"
      :title="$t('public.tip')"
      :visible.sync="showPbxSelect"
      width="30%"
    >
      <p>{{ $t('channelsettings.serviceNumber14') }}</p>
      <el-select
        size="mini"
        v-model="reloadPbx"
        :placeholder="$t('public.pleasePick')"
        class="select"
      >
        <el-option
          v-for="(item, index) in pbxs"
          :label="item.NickName + ' (' + item.PBX + ')'"
          :value="item.PBX"
          :key="index"
        >
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showPbxSelect = false" class="primary_btn">{{
          $t('public.cancel')
        }}</el-button>
        <el-button @click="confirmPbx" type="primary" class="primary_btn">{{
          $t('public.confirm')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/public-modules/card/Pagination'
import { resetForm, trimObjEmptyValue } from '@/utils/m7Utils'
import AdvSchBadge from '@/components/public-modules/card/search/AdvSchBadge'
export default {
  name: 'dicSearch',
  data () {
    return {
      advSearch: {},
      searchContent: '',
      authMode: 'provider',
      hiddenPage: this.hidePage,
      opened: false,
      pbxs: [],
      PBX: '',
      serviceList: [
        { label: this.$t('channelsettings.serviceNumber6'), value: 'normal' },
        { label: this.$t('channelsettings.serviceNumber7'), value: 'lightweight' }
      ],
      serviceType: '',
      serviceNo: '',
      showPbxSelect: false,
      reloadPbx: '',
      disabledReload: true
      //        badges: {}
    }
  },
  props: {
    width: {
      type: String,
      default: ''
    },
    hidePage: Boolean,
    currentPage: Number,
    forCall: false,
    count: {
      type: Number,
      default: 0
    },
    isReloadWebchatProcess: {
      type: Boolean,
      default: false
    },
    //      totalPage: Number,  //   总报错  估计这个值没用了
    pageSize: {
      type: Number,
      default: 10
    },
    inputTitle: String,
    isShowInput: {
      type: Boolean,
      default: true
    },
    showMode: {
      type: Boolean,
      default: false
    },
    advSearchData: {
      type: Object,
      default: function () {
        return { form: { PBX: '' } }
      }
    },
    reload: Boolean, // 生效按钮是否可点击
    isReloadIvr: { type: Boolean, default: true }, // 是否要显示生效按钮
    showAdvSearch: { type: Boolean, default: true }, // 是否要显示高级搜索
    showAdd: { type: Boolean, default: true } // 是否要显示添加按钮
  },
  methods: {
    add () {
      if (this.showMode) {
        this.$emit('add',this.authMode)
      } else {
        this.$emit('add')
      }
    },
    resetForm () {
      this.searchContent = ''
    },
    refresh () {
      this.resetForm()
      if (this.showMode) {
        this.$emit('refresh',this.authMode)
      } else {
        this.$emit('refresh')
      }
    },
    ModeChange () {
      this.$emit('ModeChange', this.authMode)
    },
    active () {
      this.$emit('active')
      let allPbx = this.pbxs || []
      let data = {}
      if (this.disabledReload) { // 禁止点击
        return
      }
      if (this.PBX) { // 搜索带出来的pbx
        data.PBX = this.PBX
      } else if (allPbx.length > 1) { // 若是没有搜索，并且是多个pbx
        this.showPbxSelect = true
        return
      } else {
        data.PBX = this.$store.state.session.user.pbx // 只有一个pbx时，取当前座席的
      }
      data.Account = this.$store.state.session.account.account
      this.reloadIvr(data)
    },
    reloadIvr (data) {
      this.$store.dispatch('reloadIvr', data).then(resp => {
        if (resp.success) {
          this.$message.success(this.$t('channelsettings.serviceNumber15'))
          this.disabledReload = true
          this.$emit('roloadIvrSucc')
        } else {
          this.$message.error(this.$t('channelsettings.serviceNumber15'))
        }
      })
    },
    confirmPbx () {
      let data = {}
      data.Account = this.$store.state.session.account.account
      if (this.reloadPbx) {
        data.PBX = this.reloadPbx
      } else {
        this.$message.error(this.$t('configLazyLoad.channel.wexinTip17'))
        return
      }
      this.reloadIvr(data)
      this.showPbxSelect = false // 考虑到生效的请求有时会很久，故先关闭窗口
    },
    removeBadge () {
      this.$emit('removeBadge')
    },
    handleIconClick () {
      this.$emit('search', this.searchContent)
    },
    inputChange () {
      this.$emit('inputChange', this.searchContent)
    },
    turnPage (val) {
      this.$emit('turnPage', val, this.searchContent)
    },
    toggle () {
      this.opened = !this.opened
    },
    hide () {
      this.opened = false
    },
    advSearch1 (deleteFlag) {
      this.PBX = ''
      this.serviceType = ''
      this.serviceNo = ''
      this.searchContent = ''
      this.advSearch.form.PBX = this.PBX
      this.advSearch.form.serviceType = this.serviceType
      this.advSearch.form.serviceNo = this.serviceNo
      this.$emit('advSearch', this.advSearch.form, true, deleteFlag)
    },
    advSearch2 () {
      this.PBX = ''
      this.serviceType = ''
      this.serviceNo = ''
      this.searchContent = ''
      this.advSearch.form.PBX = this.PBX
      this.advSearch.form.serviceType = this.serviceType
      this.advSearch.form.serviceNo = this.serviceNo
      this.$emit('advSearch', this.advSearch.form)
    },
    advSearchBtn () {
      this.searchContent = ''
      this.advSearch.form.PBX = this.PBX
      this.advSearch.form.serviceType = this.serviceType
      this.advSearch.form.serviceNo = this.serviceNo
      console.log(this.advSearch.form)
      //        this.badges = trimObjEmptyValue(this.advSearch.form)
      this.$emit('advSearch', this.advSearch.form)
      this.hide()
    },
    advResetBtn () {
      this.PBX = ''
      this.serviceType = ''
      this.serviceNo = ''
      resetForm(this.advSearch.form)
    },
    webchatProcessReload () {
      this.$emit('webchatReload')
    },
    clickFun (e) {
      if (!this.$el.contains(e.target)) {
        this.opened = false
      }
    }
  },
  computed: {
    //      advSearch () {
    //        if (this.advSearchData) {
    //          return this.advSearchData
    //        }
    //      },
    current () {
      return this.currentPage
    },
    totalPage () {
      return Math.ceil(this.count / this.pageSize) || 1
    },
    badges () {
      let data = {}
      data.PBX = this.PBX
      if (this.serviceType === 'normal') {
        data.serviceType = this.$t('channelsettings.serviceNumber6')
      } else if (this.serviceType === 'lightweight') {
        data.serviceType = this.$t('channelsettings.serviceNumber7')
      } else {
        data.serviceType = ''
      }
      data.serviceNo = this.serviceNo
      trimObjEmptyValue(data)
      return data
    }
  },
  components: {
    Pagination,
    AdvSchBadge
  },
  mounted () {
    document.addEventListener('click', this.clickFun)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.clickFun)
  },
  beforeMount () {
    this.advSearch = this.advSearchData
    console.log(this.advSearch)
    this.pbxs = this.$store.state.session.account.pbx
  },
  watch: {
    advSearchData () {
      this.advSearch = this.advSearchData
      console.log(this.advSearch)
    },
    reload (current) {
      this.disabledReload = current
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../../assets/common.styl'
.searchWrap
  position relative
  border-left 0
.search
  height 30px
  padding 3px 10px
  .el-icon-plus, .icon-shuaxin, .icon-fasongchenggong
    color $c-main
    font-size 12px
    margin-right 2px
  .disabled-icon
    color #9D9B9D
  .condition
    width 170px
    margin-right 8px
  .page
    float right
  .icon-text
    margin-right 8px
    cursor pointer
    line-height 30px
    .iconfont
      color #459ae9
      font-size 12px
  .disabled-text
    cursor not-allowed
.popover
  text-align center
  min-width 500px
  min-height 60px
  padding 10px
  padding-top 20px
  position absolute
  top 44px
  left 50px
  background #fff
  z-index 100
  border 1px solid #ddd
  border-radius 4px
  box-shadow 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 6px 0px rgba(0, 0, 0, 0.04)
  &:before
    content ''
    position absolute
    border-style solid
    top -6px
    left 276px
    border-width 0px 6px 6px 6px
    border-color #ddd transparent
  &:after
    content ''
    position absolute
    border-style solid
    top -4px
    left 278px
    border-width 0px 4px 4px 4px
    border-color #fff transparent
  .btnWrap
    text-align center
    margin-top 20px
  .itemTitle
    display inline-block
    margin auto
    margin-right 14px
    text-align left
    .el-select, .el-input
      width 140px
.operate
  padding-top 10px
  .label
    margin-bottom 10px
    font-size 14px
    .conversion
      float right
      cursor pointer
  .result
    padding 10px
    min-height 100px
    border 1px solid #ccc
    border-radius 5px
    .agent
      height 16px
      line-height 14px
      background red
      border-radius 10px
      font-size 12px
      font-family PingFang SC
      font-weight 400
      color #FFFFFF
      text-overflow ellipsis
      overflow hidden
      vertical-align middle
      margin-right 4px
  .agent-footer
    text-align right
    margin 30px 0 10px
</style>
